<template>
  <div class="cp-radio-btn">
    <div class="van-field__label left-label">性别</div>
    <div class="right-wrap">
      <!-- <div class="right-wrap-item active">男</div> -->
      <div
        class="right-wrap-item"
        :class="{ active: modelValue === item.id }"
        v-for="item in list"
        :key="item.id"
        @click="genderChoose(item)"
      >
        {{ item.name }}
      </div>
    </div>
  </div>
</template>

<script setup lang="ts">
import { ref } from 'vue'

const props = defineProps<{
  modelValue: number
}>()
const emits = defineEmits(['update:modelValue'])

// 这里的核心就是构造我们需要的数据结构，对象数组，每个对象里面有 0 1，还有 男女汉字
const list = ref<any[]>([
  { id: 1, name: '男' },
  { id: 0, name: '女' }
])

const genderChoose = (item: any) => {
  // this.$emit()
  // gender这个数据是父组件的，子组件不能改，只用用。 如果要改就想父组件抛出事件，
  // 用子向父通信的方式去修改，$emit是vue3的写法， 需要使用 defineEmits定义
  emits('update:modelValue', item.id)
}
</script>

<style lang="scss" scoped>
.cp-radio-btn {
  display: flex;
  margin-top: 10px;
  .van-field__label.left-label {
    margin-right: 0;
  }
  .right-wrap {
    display: flex;
    &-item {
      // 背景颜色 字体颜色 边框颜色  padding  margin
      background-color: var(--cp-bg);
      padding: 5px 20px;
      border-radius: 8px;
      margin-right: 10px;
      cursor: pointer;
      &.active {
        // border: 1px solid var(--cp-primary);
        // rgba 最后一个数字0 - 255 0是全透明  255是不透明
        // # 16进制演示， 一共有8位，前6位是颜色红绿蓝，第78位表示透明度 00全透明  ff不透明
        border: 1px solid var(--cp-primary);
        background-color: #16c2a322;
      }
    }
  }
}
</style>
